<template>
  <section class="song-list-details">
    <header class="list-header">
      <el-image :src="playlist.coverImgUrl" style="height: 200px;width: 200px;"></el-image>
      <div class="playlist-information">
        <p class="playlist-name">{{playlist.name}}</p>
        <div class="creator-information">
          <el-avatar :size="30" :src="playlist.creator.avatarUrl"></el-avatar>
          <div class="creator-name">{{playlist.creator.nickname}}</div>
          <div class="create-time">{{createTime}}</div>
        </div>
        <div class="playlist-tags">
          <ul>
            <li>标签：</li>
            <li v-for="(item,index) in playlist.tags" :key="index">{{item}}</li>
          </ul>
        </div>
        <div class="creator-signature">简介：{{playlist.creator.signature}}</div>
      </div>
    </header>
    <template>
      <el-tabs v-model="activeName">
        <el-tab-pane label="歌曲列表" name="歌曲列表">
          <template>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="index" label width="50"></el-table-column>
              <el-table-column prop="imgPath" label width="150">
                <template slot-scope="scope">
                  <img
                    :src="scope.row.imgPath"
                    alt
                    style="width: 70px;height:70px;border-radius:5px;"
                    @click="playMusic(id=scope.row.musicid)"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="musicName" label="音乐标题" width="300"></el-table-column>
              <el-table-column prop="artistName" label="歌手" width="150"></el-table-column>
              <el-table-column prop="album" label="专辑" width="350"></el-table-column>
              <el-table-column prop="duration" label="时长"></el-table-column>
            </el-table>
          </template>
        </el-tab-pane>
        <el-tab-pane label="评论" name="评论"></el-tab-pane>
      </el-tabs>
    </template>
  </section>
</template>

<script>
import axios from "axios";
import { formattingTimeBefore } from "@/api/commend";
export default {
  data() {
    return {
      activeName: "歌曲列表",
      playlist: {},
      tableData: [],
      createTime: "",
    };
  },
  methods: {
    getSongListDetails() {
      axios({
        method: "get",
        url: "https://autumnfish.cn/playlist/detail",
        params: {
          id: this.$route.query.keyid,
        },
      }).then((res) => {
        let ct = new Date();
        ct.setTime(res.data.playlist.createTime);
        this.createTime = ct.toLocaleDateString();
        this.playlist = res.data.playlist;
        let list = res.data.playlist.tracks;
        for (let i = 0; i < list.length; i++) {
          let musicObj = {
            index: i + 1,
            imgPath: list[i].al.picUrl,
            musicName: list[i].name,
            artistName: list[i].ar[0].name,
            album: list[i].al.name,
            duration: formattingTimeBefore(list[i].dt),
            musicid: list[i].id,
          };
          this.tableData.push(musicObj);
        }
      });
    },
    // 播放音乐
    playMusic(id) {
      axios({
        method: "get",
        url: "https://autumnfish.cn/song/url",
        params: {
          id: id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        this.$parent.$parent.$parent.$parent.$parent.url = url;
      });
    },
  },
  created() {
    this.getSongListDetails();
  },
};
</script>

<style lang="scss">
.song-list-details {
  width: 1100px;
  .list-header {
    display: flex;
    margin: 30px 0 20px 0;
    .playlist-information {
      margin-left: 20px;
      .creator-information {
        display: flex;
        line-height: 30px;
        margin: 15px 0;
        .creator-name {
          margin: 0 10px;
        }
      }
      .playlist-tags {
        li {
          display: inline-block;
        }
        :nth-child(n + 3) {
          margin-left: 10px;
        }
        margin-bottom: 10px;
      }
      .creator-signature {
        width: 880px;
      }
    }
  }
}
</style>